import React, { useState } from 'react';
import { Button, Form, Input, Upload, DatePicker, Radio, message } from 'antd';
import StickyBox from 'react-sticky-box';
import { PlusOutlined } from '@ant-design/icons';
import type { UploadFile } from 'antd/es/upload/interface';
import './hiddenDangerRepairResult.less';

import bug1 from '../imgs/bug1.jpg'
import bug2 from '../imgs/bug2.jpg'
import bug3 from '../imgs/bug3.jpg'

const HiddenDangerRepairResult: React.FC = () => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  // 隐患信息数据
  const dangerInfo = {
    projectName: '知恩塔机塔',
    description: '一号机/1次有限继电器，办公楼大厅边缘线缆外露',
    relatedEquipment: '--',
    photos: [
      bug1,
      bug2,
      bug3,
    ],
    planCompletionTime: '2024-02-10',
    assignPerson: '李杰',
  };

  const handleBack = () => {
    window.history.back();
  };

  const uploadProps = {
    listType: 'picture-card' as const,
    fileList,
    onChange: ({ fileList: newFileList }: any) => {
      setFileList(newFileList);
    },
    onPreview: async (file: UploadFile) => {
      let src = file.url as string;
      if (!src) {
        src = await new Promise(resolve => {
          const reader = new FileReader();
          reader.readAsDataURL(file.originFileObj as File);
          reader.onload = () => resolve(reader.result as string);
        });
      }
      const image = new Image();
      image.src = src;
      const imgWindow = window.open(src);
      imgWindow?.document.write(image.outerHTML);
    }
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      console.log('提交的值:', values);
      message.success('提交成功');
    } catch (error) {
      console.error('验证失败:', error);
    }
  };

  return (
    <div className="repair-result-page">
      <div className="page-header">
        {/* <StickyBox offsetTop={64} offsetBottom={20} style={{ zIndex: 1 }}> */}
        <StickyBox offsetTop={0} offsetBottom={0} style={{ zIndex: 1 }}>

          <div className="header-content">
            <span className="section-title">隐患信息</span>
            <span className="arrow"></span>
            <span className="section-title">上报维修结果</span>
            <span className="arrow"></span>
            <span className="section-title active">审核</span>
          </div>
        </StickyBox>
        <Button onClick={handleBack}>返回</Button>
      </div>

      <div className="info-section">
        <div className="info-item">
          <span className="label required">工程名称：</span>
          <span className="value">{dangerInfo.projectName}</span>
        </div>
        <div className="info-item">
          <span className="label required">维修原因：</span>
          <span className="value">{dangerInfo.description}</span>
        </div>
        <div className="info-item">
          <span className="label required">关联设备：</span>
          <span className="value">{dangerInfo.relatedEquipment}</span>
        </div>
        <div className="info-item">
          <span className="label required">维修照片：</span>
          <div className="photo-list">
            {dangerInfo.photos.map((photo, index) => (
              <div key={index} className="photo-item">
                <img src={photo} alt={`维修照片${index + 1}`} />
              </div>
            ))}
          </div>
        </div>
        <div className="info-item">
          <span className="label required">计划完成时间：</span>
          <span className="value">{dangerInfo.planCompletionTime}</span>
        </div>
        <div className="info-item">
          <span className="label required">任务下达人：</span>
          <span className="value">{dangerInfo.assignPerson}</span>
        </div>
      </div>

      <div className="divider"></div>

      <Form form={form} layout="vertical" className="repair-form">
        <div className="info-item">
          <span className="label required">维修结果照片：</span>
          <Upload {...uploadProps}>
            <div className="upload-button">
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>上传照片/视频</div>
            </div>
          </Upload>
        </div>

        <div className="info-item">
          <span className="label">录音：</span>
          <Button>无录音设备</Button>
        </div>

        <div className="info-item">
          <span className="label required">维修结果：</span>
          <Form.Item
            name="repairResult"
            rules={[{ required: true, message: '请输入维修结果' }]}
            style={{ flex: 1, marginBottom: 0 }}
          >
            <Input.TextArea rows={4} placeholder="请输入维修结果" />
          </Form.Item>
        </div>

        <div className="info-item">
          <span className="label required">完成时间：</span>
          <Form.Item
            name="completionTime"
            rules={[{ required: true, message: '请选择完成时间' }]}
            style={{ flex: 1, marginBottom: 0 }}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
        </div>

        <div className="info-item">
          <span className="label">记录人员：</span>
          <span className="value">王明</span>
        </div>
        {/* 分割线 */}
        <div className="divider" style={{ border: '1px dashed #000' }} ></div>

        <div className="info-item">
          <span className="label required">审核：</span>
          <Form.Item
            name="audit"
            rules={[{ required: true, message: '请选择审核结果' }]}
          >
            <Radio.Group>
              <Radio value={1}>通过</Radio>
              <Radio value={0}>不通过</Radio>
            </Radio.Group>
          </Form.Item>
        </div>

        <div className="form-actions">
          <Button onClick={() => form.resetFields()}>取消</Button>
          <Button type="primary" onClick={handleSubmit}>提交</Button>
        </div>
      </Form>
    </div>
  );
};

export default HiddenDangerRepairResult;
